<style lang="scss">
.user-info {
	padding: 0 30rpx 0 27rpx;
	display: flex;
	justify-content: space-between;
}

.user-info-avatar {
	width: 146rpx;
	height: 146rpx;
	background: rgb(255, 255, 255);
	border: 5rpx solid rgb(255, 255, 255);
	border-radius: 50%;
	background-color: #FFF;
}

.user-info-center {
	width: calc(100% - 27rpx - 27rpx - 146rpx - 40rpx);
	color: #FFF;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.user-info-name {
	font-size: 36rpx;
	font-weight: bold;
	display: flex;
	align-items: center;
}

.user-info-edit {
	margin-left: 19rpx;
}

.user-info-edit image {
	width: 19rpx;
	height: 21rpx;
	display: block;
}

.user-info-phone {
	font-size: 28rpx;
	font-weight: 600;
	margin-top: 10rpx;
}

.user-info-arrow {
	width: 40rpx;
	display: flex;
	align-items: center;
}
</style>

<template>
	<view class="user-info">

		<image class="user-info-avatar" :src="avatar" mode="aspectFill"></image>
		
		<view class="user-info-center">
			<template v-if="nickName">
				<view class="user-info-name">
					<text v-text="nickName"></text>
				
					<!-- <button class="user-info-edit">
						<image src="/static/icon/user-edit.png" mode="widthFix">
					</button> -->
				</view>
				
				<view class="user-info-phone">{{phone}}</view>
			</template>
			<navigator v-else hover-class="none" url="/pages/login/index?back=true">
				登录
			</navigator>
		</view>
		
		<button class="user-info-arrow">
			<arrow-right-white></arrow-right-white>
		</button>
	</view>
</template>

<script>
import ArrowRightWhite from "../../../components/arrow-right-white";

export default {
	
	props: {

		avatar: {
			type: String,
			default: "",
		},

		nickName: {
			type: String,
			default: "",
		},

		phone: {
			type: String,
			default: "",
		},

	},

	components: {
		ArrowRightWhite,
	}

}
</script>